<template>
  <div class="icon-wrapper">
    <svg
      :width="size"
      :height="size"
      viewBox="0 0 1024 1024"
      xmlns="http://www.w3.org/2000/svg"
      class="animated-icon"
    >
      <!-- 背景圆圈 -->
      <circle cx="512" cy="512" r="400" stroke="#F3F3F3" stroke-width="70" fill="none" />
      <!-- 动画圆圈 -->
      <circle
        cx="512"
        cy="512"
        r="400"
        stroke="#FF6D75"
        stroke-width="70"
        fill="none"
        stroke-dasharray="2512"
        stroke-dashoffset="2512"
        class="animate-circle"
      />
      <!-- 感叹号的竖线 -->
      <line
        x1="512"
        y1="300"
        x2="512"
        y2="550"
        stroke="#FF6D75"
        stroke-width="80"
        stroke-linecap="round"
        class="animate-line"
      />
      <!-- 感叹号的点 -->
      <circle cx="512" cy="720" r="50" fill="#FF6D75" class="animate-dot" />
    </svg>
  </div>
</template>

<script lang="ts" setup>
defineProps({
  size: {
    type: String,
    default: '128px'
  }
})
</script>

<style scoped>
.animated-icon {
  display: block;
  margin: auto;
}

.animate-circle {
  animation: dash 1s linear forwards;
}

@keyframes dash {
  0% {
    stroke-dashoffset: 2512;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

.animate-line {
  opacity: 0;
  animation: lineAppear 0.5s ease-out forwards;
  animation-delay: 1s; /* 延迟动画，确保在圆圈动画后 */
}

@keyframes lineAppear {
  from {
    opacity: 0;
    stroke-dasharray: 0 300; /* 从0长度开始 */
  }
  to {
    opacity: 1;
    stroke-dasharray: 300 0; /* 到线的总长度 */
  }
}

.animate-dot {
  opacity: 0;
  animation: dotAppear 0.5s ease-out forwards;
  animation-delay: 1.5s; /* 延迟动画，确保在竖线动画后 */
}

@keyframes dotAppear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.icon-wrapper {
  position: relative;
  width: fit-content;
  height: fit-content;
}
</style>
